/*
 * 商城数据大盘
 * @Author: along
 * @Date: 2020-01-08 14:08:16
 */
<template>
    <div class="container shopAnAlysis">
        <!-- 商场大盘 -->
        <div class="banner">
            <div
                class="banner-top"
                style="padding-bottom: 0"
            >
                <div class="main-content">
                    <p class="main-content-title"/>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_list.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(20)"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="container-market">
            <div class="market-content">
                <div
                    v-for="(item,index) in marketList"
                    :key="index"
                    class="market-content-list"
                    v-if="item.auth"
                >
                    <div
                        class="market-list-head"
                        @click="fnShowDialog(index,item.title)"
                    >
                        <p>
                            <i
                                class="iconfont market-list-icon"
                                :class="item.icon"
                            />
                            <span
                                class="market-list-title"
                            >{{ item.title }}</span>
                            <span
                                class="iconfont el-icon-hand-xiangyou"
                                style="color:#88909C;font-size:12px"
                            />
                        </p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            :content="item.tips"
                            style="height: 14px"
                        >
                            <el-button
                                slot="reference"
                                type="text"
                                style="marginTop:-15px"
                            >
                                <i class="el-icon-hand-tishi iconfont"/>
                            </el-button>
                        </el-popover>
                    </div>
                    <p
                        class="market-list-today"
                        style="display:flex;align-items: center;"
                    >
                        <!-- <span
                            class="iconfont el-icon-hand-arrowLeft"
                            v-if="index >= 9"
                            style="color:#20A0FF;font-size:12px;font-weight:bold;padding-right:10px;padding-left:10px"
                            @click="fnChangeData(index)"
                        /> -->
                        <span v-if="item.is_icon">¥</span>
                        {{ Number(item.today).toFixed(2) }}
                        <span
                            class="iconfont el-icon-hand-xiangyou"
                            v-if="index >= 9 || index == 0 || index == 2"
                            style="color:#20A0FF;font-size:12px;font-weight:bold;padding-left:10px;padding-right:30px"
                            @click="fnChangeData(index)"
                        />
                    </p>
                    <p class="market-list-next" />
                    <p
                        class="market-list-yesterday"
                    >
                        <span class="market-yesterday-text">昨日</span>
                        <span class="market-yesterday-money"><span v-if="item.is_icon">¥</span>{{ item.yesterday == '' || item.yesterday == 0 ? 0 : Number(item.yesterday).toFixed(2) }}</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 查看数据概括 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="650px"
            :close-on-click-modal="false"
            class="el-dialog-echarts"
        >
            <div class="content_left">
                <div
                    class="content_head"
                    v-if="is_head"
                >
                    <p class="content_text">日期</p>
                    <el-radio-group
                        v-model="echartstype"
                        size="mini"
                        style="marginRight:10px"
                        @change="fnGetChart($event)"
                    >
                        <el-radio-button :label="2" >近一周</el-radio-button>
                        <el-radio-button :label="4" >近三周</el-radio-button>
                        <!-- <el-radio-button :label="8" >近三个月</el-radio-button> -->
                    </el-radio-group>
                </div>
                <div class="content_echarts">
                    <div
                        id="echarts_al"
                        ref="echarts_al"
                        class="echarts"
                    />
                </div>
            </div>
        </el-dialog>
        <!-- /查看数据概括 -->
        <div class="main">
            <!-- 商城流量来源分析 -->
            <div
                class="main-flow"
                v-if="authResult.auth_app_type"
            >
                <div class="main-content">
                    <p class="main-content-title">商城流量来源分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_flow.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(1)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="shopFolwLst"
                    max-height="160"
                    height="160px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="origin"
                        label="来源"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="view_user_count"
                        label="访客数"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        prop="order_user_count"
                        label="下单人数"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        prop="order_user_count"
                        label="转化率"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.order_user_count !== 0 && scope.row.view_user_count !== 0">
                                {{ (scope.row.order_user_count / scope.row.view_user_count * 100).toFixed(2) | isNaN }}%
                            </span>
                            <span v-else>0%</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 商城商品整体购买漏斗 -->
            <div
                class="main-funnel"
                v-if="authResult.auth_app_goods"
            >
                <div class="main-content">
                    <p class="main-content-title">商城商品整体购买漏斗</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_funel.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(2)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="main-funnel-cont">
                    <div class="main-cont-list">
                        <p class="main-list-title">点击商品卡片</p>
                        <p class="main-list-cont">
                            <span class="main-list-ratio">100%</span>
                            <span class="main-list-number">{{ order_list.detail_view_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">详情页点击购买</p>
                        <p class="main-list-cont  mail">
                            <span
                                class="main-list-ratio"
                                v-if="order_list.order_count !== 0 && order_list.detail_view_count !== 0"
                            >{{ (order_list.order_count / order_list.detail_view_count * 100).toFixed(2) | isNaN }}%</span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >0%</span>
                            <span class="main-list-number">{{ order_list.order_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">支付成功</p>
                        <p class="main-list-cont  red">
                            <span
                                class="main-list-ratio"
                                v-if="order_list.pay_order_count !== 0 && order_list.detail_view_count !== 0"
                            >{{ (order_list.pay_order_count / order_list.detail_view_count * 100).toFixed(2) | isNaN }}%</span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >0%</span>
                            <span class="main-list-number">{{ order_list.pay_order_count }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 排名前100的商品 -->
        <shopHead
            :title="shop_head.range"
            id="shop-range"
            v-if="authResult.auth_range"
        />
        <div class="range-shop">
            <div class="range-menu">
                <p
                    v-for="(item,index) in shopMenu"
                    :key="index"
                    :class="index == rande_index ? 'range-active' : 'range-menu-index' "
                    @click="fnChangeRange(item,index)"
                >
                    {{ item.label }}
                    <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        content="转化率=该商品订单量/该商品的详情页浏览量"
                        v-if="index == 3"
                    >
                        <el-button
                            slot="reference"
                            class="range-btn"
                        >
                            <i
                                class="el-icon-hand-tishi iconfont"
                                :style="{color: rande_index == 3 ? '#fff' : ''}"
                            />
                        </el-button>
                    </el-popover>
                </p>
            </div>
            <div class="range-data">
                <el-table
                    :data="rangeList"
                    height="100%"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="rank_index"
                        label="排名"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="goods_title"
                        label="商品"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                class="el-shop-tiele"
                                @click="fnGoShopDetail(scope.row)"
                            >{{ scope.row.goods_title }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="module_list"
                        label="所属模块"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.module_list.length > 0">
                                <span
                                    v-for="(item,index) in scope.row.module_list"
                                    :key="index"
                                >
                                    {{ item.title }};
                                </span>
                            </p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="goods_attr"
                        label="属性"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.goods_attr == 1">自营商品</span>
                            <span v-if="scope.row.goods_attr == 2">合作淘客</span>
                            <span v-if="scope.row.goods_attr == 3">其他淘客</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="rank_value"
                        label="数据"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.rank_value }}{{ range_type == 3 ? '%' : '' }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 商城搜索-指标 -->
        <shopHead
            :title="shop_head.search_title"
            id="shop-search"
            v-if=" !authResult.auth_search && !authResult.auth_search_keyword && !authResult.auth_search_buy ? false : true"
        />
        <div class="search">
            <div
                class="search-data"
                v-if="authResult.auth_search"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_search.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(3)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">商城搜索次数</p>
                        </div>
                        <div class="zd-content">{{ shopSearchList.search_times }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">搜索用户数</p>
                        </div>
                        <div class="zd-content">{{ shopSearchList.student_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">人均搜索次数</p>
                        </div>
                        <div class="zd-content">{{ shopSearchList.avg_search_times }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">一次搜索平均查看商品次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="用户在搜索结果页面点击商品进入详情页的总次数/用户搜索商品的次数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopSearchList.avg_goods_click }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">查看商品次数</p>
                        </div>
                        <div class="zd-content">{{ shopSearchList.goods_click }}</div>
                    </div>
                </div>
            </div>
            <div class="main">
                <!-- 搜索关键词分析 -->
                <div
                    class="main-flow"
                    v-if="authResult.auth_search_keyword"
                >
                    <div class="main-content">
                        <p class="main-content-title">搜索关键词分析</p>
                        <div class="main-content-right">
                            <el-date-picker
                                v-model="shop_dalte.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="fnFilterData(4)"
                            />
                        </div>
                    </div>
                    <div class="main-seat" />
                    <el-table
                        :data="shopDelateList"
                        max-height="153"
                        height="153px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            prop="keyword"
                            label="关键词"
                            show-overflow-tooltip
                            align="center"
                        />
                        <el-table-column
                            prop="search_times"
                            label="搜索次数"
                            show-overflow-tooltip
                            align="center"
                        />
                        <el-table-column
                            prop="goods_buy"
                            label="点击购买数"
                            show-overflow-tooltip
                            align="center"
                        />
                        <el-table-column
                            prop="goods_buy_percent"
                            label="转化率"
                            show-overflow-tooltip
                            align="center"
                        />
                    </el-table>
                </div>
                <!-- 搜索购买漏斗 -->
                <div
                    class="main-funnel"
                    v-if="authResult.auth_search_buy"
                >
                    <div class="main-content">
                        <p class="main-content-title">搜索购买漏斗</p>
                        <div class="main-content-right">
                            <el-date-picker
                                v-model="shop_mail.date"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                size="small"
                                @change="fnFilterData(5)"
                            />
                        </div>
                    </div>
                    <div class="main-seat" />
                    <div class="main-funnel-cont">
                        <div class="main-cont-list">
                            <p class="main-list-title">搜索结果页面</p>
                            <p class="main-list-cont blue">
                                <span class="main-list-ratio">100%</span>
                                <span class="main-list-number">{{ shopInvite.search_times }}</span>
                            </p>
                        </div>
                        <div class="main-cont-arrow">
                            <div class="main-arrow-list">
                                <p class="main-arrow-line" />
                                <p class="main-arrow-delta" />
                            </div>
                        </div>
                        <div class="main-cont-list">
                            <p class="main-list-title">点击商品卡片</p>
                            <p class="main-list-cont  mail">
                                <span
                                    class="main-list-ratio"
                                    v-if="shopInvite.search_times !== 0 && shopInvite.goods_click !== 0"
                                >
                                    {{ (shopInvite.goods_click / shopInvite.search_times * 100).toFixed(0) | isNaN }}%
                                </span>
                                <span
                                    class="main-list-ratio"
                                    v-else
                                >
                                    0
                                </span>
                                <span class="main-list-number">{{ shopInvite.goods_click }}</span>
                            </p>
                        </div>
                        <div class="main-cont-arrow">
                            <div class="main-arrow-list">
                                <p class="main-arrow-line" />
                                <p class="main-arrow-delta" />
                            </div>
                        </div>
                        <div class="main-cont-list">
                            <p class="main-list-title">详情页点击购买</p>
                            <p class="main-list-cont  red">
                                <span
                                    class="main-list-ratio"
                                    v-if="shopInvite.goods_buy !== 0 && shopInvite.goods_click !== 0"
                                >
                                    {{ (shopInvite.goods_buy / shopInvite.goods_click * 100).toFixed(0) | isNaN }}%
                                </span>
                                <span
                                    class="main-list-ratio"
                                    v-else
                                >
                                    0
                                </span>
                                <span class="main-list-number">{{ shopInvite.goods_buy }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <shopHead
            :title="shop_head.banner"
            id="shop-banner"
            v-if=" !authResult.auth_banner && !authResult.auth_single_banner ? false : true "
        />
        <!-- banner -->
        <div class="banner">
            <div
                class="banner-top"
                v-if="authResult.auth_banner"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_banner.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(6)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-banner">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">banner区域整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="banner区域点击次数/商城首页的浏览量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopBannerList.click_percent }}%</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">banner区域点击次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="用户在整个banner区域的点击次数之和">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopBannerList.click_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 单个banner分析 -->
            <div
                class="banner-bottom"
                v-if="authResult.auth_single_banner"
            >
                <div class="main-content">
                    <p class="main-content-title">单个banner分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_banner_fx.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(7)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="shopSingLeBanner"
                    min-height="250px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="banner_no"
                        label="banner编号"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="image_url"
                        label="图片"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <template>
                                <a
                                    href="javascript:;"
                                    style="color: #409EFF"
                                    @click="fnShowPreview(scope.row.image_url)">查看</a>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="start_time"
                        label="开始时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="end_time"
                        label="结束时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="update_time"
                        label="编辑时间"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.update_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.status == 1">
                                <span v-if="scope.row.time_status == 0">已隐藏</span>
                                <span v-if="scope.row.time_status == 1">已显示</span>
                                <span v-if="scope.row.time_status == 2">已结束</span>
                            </p>
                            <p v-if="scope.row.status == 0">已结束</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="click_count"
                        label="点击量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="expose_count"
                        label="曝光量"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="click_count"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :label="shop_title.renderHeader13"
                        :render-header="renderHeader"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.click_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.click_count / scope.row.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="时间段"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                class="cursor-font"
                                @click="fnGetbannerView(scope.row)"
                            >查看</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <shopHead
            :title="shop_head.jing"
            id="shop-jing"
            v-if=" !authResult.auth_custom_area && !authResult.auth_single_custom_area ? false : true "
        />
        <!-- 金刚区 -->
        <div class="banner">
            <div
                class="banner-top"
                v-if="authResult.auth_custom_area"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_jing.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(8)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-banner">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">金刚区区域整体点击次率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指金刚区区域的点击量总和/商城首页的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopJingData.click_percent }}%</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">金刚区区域点击次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指金刚区区域的点击量总和">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopJingData.click_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 单个金刚区分析 -->
            <div
                class="banner-bottom banner-bottom-jing"
                v-if="authResult.auth_single_custom_area"
            >
                <div class="main-content">
                    <p class="main-content-title">单个金刚区分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_jing_fx.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(9)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="shopJingList"
                    min-height="509px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="title"
                        label="金刚区名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="image_url"
                        label="图片"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <img
                                :src="scope.row.image_url"
                                style="width:50px;height:50px;borderRadius:50%"
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="click_count"
                        label="点击量"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        prop="user_count"
                        label="用户数"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        prop="click_count"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :label="shop_title.renderHeader12"
                        :render-header="renderHeader"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.click_count == 0">
                                0
                            </span>
                            <span v-else>
                                {{ (scope.row.click_count / jingCount).toFixed(2) | isNaN }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="expose_count"
                        label="金刚区页面曝光"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <p style="color:#81A8EA">100%</p>
                            <p>{{ scope.row.expose_count }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="click_count"
                        label="点击商品卡片"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.click_count!==0 && scope.row.expose_count !== 0"
                                style="color:#64B76D"
                            >
                                {{ (scope.row.click_count / scope.row.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                v-else
                                style="color:#64B76D"
                            >0%</span>
                            <p> {{ scope.row.click_count }} </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="goods_order_count"
                        label="详情页点击购买"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.goods_order_count!==0 && scope.row.expose_count !== 0"
                                style="color:#EAAC50"
                            >
                                {{ (scope.row.goods_order_count / scope.row.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                v-else
                                style="color:#EAAC50"
                            >0%</span>
                            <p>{{ scope.row.goods_order_count }}</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <shopHead
            :title="shop_head.zero"
            id="shop-zero"
            v-if=" !authResult.auth_goods_free && !authResult.auth_free_invite ? false : true "
        />
        <!-- 0元购 -->
        <div class="zero">
            <div
                class="banner-top"
                v-if="authResult.auth_goods_free"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_zero.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(10)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-zero">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购入口点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指点击0元购入口的次数/商城首页的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopZeroList.click_percent }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购入口点击量</p>
                        </div>
                        <div class="zd-content">{{ shopZeroList.click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购订单量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指0元购产生的订单总数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopZeroList.tbk_order_count }}</div>
                    </div>
                    <!-- <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购‘提醒我’点击量</p>
                        </div>
                        <div class="zd-content">{{ shopZeroList.remind_click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购‘提醒我’点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="衡量0元购页面的“提醒我”按钮的点击率">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopZeroList.remind_click_count !== 0 && shopZeroList.click_count !== 0">
                                {{ (shopZeroList.remind_click_count / shopZeroList.click_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div> -->
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">立即邀请点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指“立即邀请”按钮的点击量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopZeroList.share_click_count_invite }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">底部分享按钮点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指底部的那个分享按钮的点击量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopZeroList.share_click_count_buy }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">右上分享点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指右上角的分享按钮的点击量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopZeroList.share_click_count_share }}</div>
                    </div>
                    <!-- <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">领取学生券点击量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指“领取学生券”按钮的点击量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopZeroList.free_button_click_percent }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">领取学生券点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指此按钮的点击量/此按钮的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopZeroList.free_button_click_percent }}</div>
                    </div> -->
                    <!-- <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购‘邀请好友’点击量</p>
                        </div>
                        <div class="zd-content">{{ shopZeroList.invite_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购‘邀请好友’点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="衡量0元购页面的“邀请好友”按钮的点击率">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopZeroList.invite_count !== 0 && shopZeroList.click_count !== 0">
                                {{ (shopZeroList.invite_count / shopZeroList.click_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div> -->
                </div>
            </div>
            <!-- 0元购邀请好友漏斗 -->
            <div
                class="main-funnel funnel-content"
                v-if="authResult.auth_free_invite"
            >
                <div class="main-content">
                    <p class="main-content-title">0元购邀请好友漏斗</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_zero_funner.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(11)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="main-funnel-cont">
                    <div class="main-cont-list">
                        <p class="main-list-title">立即邀请</p>
                        <p class="main-list-cont blue">
                            <span class="main-list-ratio">100%</span>
                            <span class="main-list-number">{{ inviteList.invite_click_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">点击分享渠道</p>
                        <p class="main-list-cont  mail">
                            <span
                                class="main-list-ratio"
                                v-if="inviteList.invite_channel_click_count !== 0 && inviteList.invite_click_count !== 0"
                            >
                                {{ (inviteList.invite_channel_click_count / inviteList.invite_click_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >0%</span>
                            <span class="main-list-number">{{ inviteList.invite_channel_click_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">用户进入APP</p>
                        <p class="main-list-cont">
                            <span
                                class="main-list-ratio"
                                v-if="inviteList.invite_code_use_count !== 0 && inviteList.invite_click_count !== 0"
                            >
                                {{ (inviteList.invite_code_use_count / inviteList.invite_click_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >0%</span>
                            <span class="main-list-number">{{ inviteList.invite_code_use_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">该用户为新用户</p>
                        <p class="main-list-cont  red">
                            <span
                                class="main-list-ratio"
                                v-if="inviteList.invite_user_count !== 0 && inviteList.invite_click_count !== 0"
                            >
                                {{ (inviteList.invite_user_count / inviteList.invite_click_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >0%</span>
                            <span class="main-list-number">{{ inviteList.invite_user_count }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <shopHead
            :title="shop_head.ms"
            id="shop-seckill"
            v-if=" !authResult.auth_flash_sale && !authResult.auth_flash_sale_invite ? false : true "
        />
        <!-- 限时秒杀 -->
        <div class="zero">
            <div
                class="banner-top"
                v-if="authResult.auth_flash_sale"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_ms.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(12)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-ms">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">秒杀入口点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指点击秒杀入口的次数/秒杀的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopSeckill.click_percent }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">秒杀入口点击量</p>
                        </div>
                        <div class="zd-content">{{ shopSeckill.click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">秒杀订单量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指秒杀产生的订单总数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopSeckill.order_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 限时秒杀购买漏斗 -->
            <div
                class="main-funnel funnel-content"
                v-if="authResult.auth_flash_sale_invite"
            >
                <div class="main-content">
                    <p class="main-content-title">秒杀商品购买漏斗</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_seckill.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(13)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="main-funnel-cont">
                    <div class="main-cont-list">
                        <p class="main-list-title">正秒杀的界面</p>
                        <p class="main-list-cont blue">
                            <span class="main-list-ratio">100%</span>
                            <span class="main-list-number">{{ seckillIntive.list_expose_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">点击商品卡片</p>
                        <p class="main-list-cont  mail">
                            <span
                                class="main-list-ratio"
                                v-if="seckillIntive.goods_click_count !== 0 && seckillIntive.list_expose_count !== 0"
                            >
                                {{ (seckillIntive.goods_click_count / seckillIntive.list_expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >
                                0%
                            </span>
                            <span class="main-list-number">{{ seckillIntive.goods_click_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">详情页点击购买</p>
                        <p class="main-list-cont">
                            <span
                                class="main-list-ratio"
                                v-if="seckillIntive.order_count !== 0 && seckillIntive.list_expose_count !== 0"
                            >
                                {{ (seckillIntive.order_count / seckillIntive.list_expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >
                                0%
                            </span>
                            <span class="main-list-number">{{ seckillIntive.order_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">支付成功</p>
                        <p class="main-list-cont  red">
                            <span
                                class="main-list-ratio"
                                v-if="seckillIntive.order_pay_count !== 0 && seckillIntive.list_expose_count !== 0"
                            >
                                {{ (seckillIntive.order_pay_count / seckillIntive.list_expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >
                                0%
                            </span>
                            <span class="main-list-number">{{ seckillIntive.order_pay_count }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <shopHead
            :title="shop_head.active"
            id="shop-active"
            v-if=" !authResult.auth_activity && !authResult.auth_single_activity ? false : true "
        />
        <!-- 活动区 -->
        <div class="banner">
            <div
                class="banner-top"
                v-if="authResult.auth_activity"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_active.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(14)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-banner">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">活动区区域整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指活动区区域的点击量总和/活动区的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopActiveList.click_percent }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">活动区区域点击次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指活动区区域的点击量总和">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopActiveList.click_count }}</div>
                    </div>
                </div>
            </div>
            <!-- 单个活动区分析 -->
            <div
                class="banner-bottom banner-bottom-jing"
                v-if="authResult.auth_single_activity"
            >
                <div class="main-content">
                    <p class="main-content-title">单个活动区分析</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_active_fx.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(15)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <el-table
                    :data="shopActiveFxList"
                    min-height="355px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="title"
                        label="活动区名称"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    />
                    <el-table-column
                        prop="image"
                        label="图片"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <template>
                                <a
                                    href="javascript:;"
                                    style="color: #409EFF"
                                    @click="fnShowPreview(scope.row.image)">查看</a>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="click_count"
                        label="点击量"
                        show-overflow-tooltip
                        align="center"
                    />
                    <el-table-column
                        prop="click_count"
                        :label="shop_title.renderHeader14"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.click_count !== 0 && scope.row.expose_count !== 0">
                                {{ (scope.row.click_count / scope.row.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="expose_count"
                        label="活动区页面曝光"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <p style="color:#81A8EA">100%</p>
                            <p>{{ scope.row.expose_count }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="goods_detail_expose_count"
                        label="点击商品卡片"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.goods_detail_expose_count !== 0 && scope.row.expose_count !== 0"
                                style="color:#64B76D"
                            >
                                {{ (scope.row.goods_detail_expose_count / scope.row.expose_count * 100 ).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                v-else
                                style="color:#64B76D"
                            >0%</span>
                            <p>{{ scope.row.goods_detail_expose_count }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="goods_order_count"
                        label="详情页点击购买"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.goods_order_count !== 0 && scope.row.expose_count !== 0"
                                style="color:#EAAC50"
                            >
                                {{ (scope.row.goods_order_count / scope.row.expose_count * 100 ).toFixed(1) | isNaN }}%
                            </span>
                            <span
                                style="color:#EAAC50"
                                v-else
                            >0%</span>
                            <p>{{ scope.row.goods_order_count }}</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <shopHead
            :title="shop_head.home"
            id="shop-home"
            v-if=" !authResult.auth_shop_home ? false : true "
        />
        <!-- 商城首页指标 -->
        <div
            class="banner"
            v-if="authResult.auth_shop_home"
        >
            <div class="banner-top">
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_home.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(16)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-home">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">商城首页跳出率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指只访问了商城首页一个页面就离开的访问量占商城首页总访问量的占比">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.exit_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.exit_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">banner区域整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指商城模块banner的点击量总和/商城首页的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.banner_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.banner_click_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">金刚区区域的整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指金刚区区域的点击量总和/商城首页的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.custom_area_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.custom_area_click_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">活动区区域整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指活动区区域的点击量总和/活动区的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.activity_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.activity_click_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">分类tab的整体点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="衡量除首页tab之外的其他商品分类tab的点击率如何">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.goods_type_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.goods_type_click_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购入口点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指点击0元购入口的次数/商城首页的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.goods_free_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.goods_free_click_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">秒杀入口点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指点击秒杀入口的次数/秒杀的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.goods_flash_sale_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.goods_flash_sale_click_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <!-- <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">广播消息点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="衡量广播消息的点击量如何">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.alert_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.alert_click_count / shopHomeList.expose_count * 100).toFixed(1) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div> -->
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">精品推荐商品平均点击次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="衡量精品推荐区域的真实效能，公式为：精品推荐区域内商品的点击次数/该区域的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.recommend_goods_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.recommend_goods_click_count / shopHomeList.expose_count * 100).toFixed(2) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">折扣区入口点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指折扣专区入口的点击量/此入口的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopHomeList.goods_new_user_click_count !== 0 && shopHomeList.expose_count !== 0">
                                {{ (shopHomeList.goods_new_user_click_count / shopHomeList.expose_count * 100).toFixed(2) | isNaN }}%
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <shopHead
            :title="shop_head.code"
            id="shop-code"
            v-if=" !authResult.auth_invite_code ? false : true "
        /> -->
        <!-- 获取邀请码页面 -->
        <div
            class="banner"
            v-if="false"
        >
            <!-- v-if="authResult.auth_invite_code" -->
            <div class="banner-top">
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_code.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(17)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-ms">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">获取邀请码页面曝光量</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指的是输入邀请码页面的浏览量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopCodeList.expose_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">点击“去获取邀请码”的次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指用户点击“获取邀请码”按钮的次数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopCodeList.click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">按钮点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指按钮的点击次数/邀请码页面的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="shopCodeList.click_count !== 0 && shopCodeList.expose_count !== 0">
                                {{ (shopCodeList.click_count / shopCodeList.expose_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 折扣专区 -->
        <shopHead
            :title="shop_head.people"
            id="shop-people"
            v-if=" !authResult.auto_new_user && !authResult.auto_user_buy ? false : true "
        />
        <div class="banner">
            <!-- 折扣专区数据展示 -->
            <div
                class="banner-top"
                v-if="authResult.auto_new_user"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="shop_people.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(18)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data zd-data-home">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">折扣专区入口点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指折扣专区入口的点击量/折扣专区入口的曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopPeopleList.click_percent }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">折扣专区点击量</p>
                        </div>
                        <div class="zd-content">{{ shopPeopleList.click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">折扣专区订单量</p>
                        </div>
                        <div class="zd-content">{{ shopPeopleList.order_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">右上分享按钮点击量</p>
                        </div>
                        <div class="zd-content">{{ shopPeopleList.share_click_count_share }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">底部分享按钮点击量</p>
                        </div>
                        <div class="zd-content">{{ shopPeopleList.share_click_count_bottom }}</div>
                    </div>
                    <!--2021.08.24隐藏-->
                    <!--<div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">规则按钮点击量</p>
                        </div>
                        <div class="zd-content">{{ shopPeopleList.rule_click_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">0元购引导语点击率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指该引导语的点击量/引导语曝光量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ shopPeopleList.guide_expose_percent }}</div>
                    </div>-->
                </div>
            </div>
            <!-- /折扣专区数据展示 -->

            <!-- 折扣专区商品购买漏斗 -->
            <div
                class="main-funnel funnel-content"
                v-if="authResult.auto_user_buy"
            >
                <div class="main-content">
                    <p class="main-content-title">折扣专区商品购买漏斗</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="active_people.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(19)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="main-funnel-cont">
                    <div class="main-cont-list">
                        <p class="main-list-title">点击商品卡片</p>
                        <p class="main-list-cont blue">
                            <span class="main-list-ratio">100%</span>
                            <span class="main-list-number">{{ shopActivePeople.goods_click_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">详情页点击购买</p>
                        <p class="main-list-cont  mail">
                            <span
                                class="main-list-ratio"
                                v-if="shopActivePeople.buy_click_count !== 0 && shopActivePeople.goods_click_count !==0"
                            >
                                {{ (shopActivePeople.buy_click_count / shopActivePeople.goods_click_count).toFixed(2) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >
                                0%
                            </span>
                            <span class="main-list-number">{{ shopActivePeople.buy_click_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">订单页曝光量</p>
                        <p class="main-list-cont">
                            <span
                                class="main-list-ratio"
                                v-if="shopActivePeople.order_transfer_expose_count !== 0 && shopActivePeople.goods_click_count !==0"
                            >
                                {{ (shopActivePeople.order_transfer_expose_count / shopActivePeople.goods_click_count).toFixed(2) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >
                                0%
                            </span>
                            <span class="main-list-number">{{ shopActivePeople.order_transfer_expose_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">提交订单点击量</p>
                        <p
                            class="main-list-cont"
                            style="background:#81DFEA"
                        >
                            <span
                                class="main-list-ratio"
                                v-if="shopActivePeople.order_count !== 0 && shopActivePeople.goods_click_count !==0"
                            >
                                {{ (shopActivePeople.order_count / shopActivePeople.goods_click_count).toFixed(2) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >
                                0%
                            </span>
                            <span class="main-list-number">{{ shopActivePeople.order_count }}</span>
                        </p>
                    </div>
                    <div class="main-cont-arrow">
                        <div class="main-arrow-list">
                            <p class="main-arrow-line" />
                            <p class="main-arrow-delta" />
                        </div>
                    </div>
                    <div class="main-cont-list">
                        <p class="main-list-title">支付成功</p>
                        <p class="main-list-cont  red">
                            <span
                                class="main-list-ratio"
                                v-if="shopActivePeople.order_pay_count !== 0 && shopActivePeople.goods_click_count !==0"
                            >
                                {{ (shopActivePeople.order_pay_count / shopActivePeople.goods_click_count).toFixed(2) | isNaN }}%
                            </span>
                            <span
                                class="main-list-ratio"
                                v-else
                            >
                                0%
                            </span>
                            <span class="main-list-number">{{ shopActivePeople.order_pay_count }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div
            class="nav"
            v-if="true"
        >
            <div
                class="nav-cont"
                :style="{height: navHeight + 'px'}"
            >
                <div
                    v-for="(item,index) in navList"
                    :key="index"
                    class="nav-list"
                    :class="index == menuIndex ? 'nav-list-cursor' : '' "
                    @click="fnMoveMenu(index)"
                    v-if="navHeight == 50 && index == menuIndex"
                >
                    <p
                        :style="{'white-space': index == 2 || index == 3 || index == 4 || index == 6 ? 'nowrap' : '', 'width': index == 0 || index == 1 || index == 5 || index == 7 || index == 8 || index == 9 ? '28px' : '','textAlign': 'center' }"
                    >{{ item }}</p>
                </div>
                <div
                    v-for="(item,index) in navList"
                    :key="index"
                    class="nav-list"
                    :class="index == menuIndex ? 'nav-list-cursor' : '' "
                    @click="fnMoveMenu(index)"
                    v-if="navHeight > 50"
                >
                    <p
                        :style="{'white-space': index == 2 || index == 3 || index == 4 || index == 6 ? 'nowrap' : '', 'width': index == 0 || index == 1 || index == 5 || index == 7 || index == 8 || index == 9 ? '28px' : '','textAlign': 'center' }"
                    >{{ item }}</p>
                </div>
            </div>
            <p
                class="nav-foot"
                @click="fnFold()"
            >
                <i
                    class="iconfont el-icon-hand-xiangshang"
                    v-if="navHeight > 50"
                />
                <i
                    class="iconfont el-icon-hand-xiangxia"
                    v-if="navHeight == 50"
                />
            </p>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import shopHead from '@/components/shop-head';
import imgPreview from '@/components/common/img-preview';
import { getDate } from '@/assets/js/utils';
export default {
    /**
     * @param  {Object}    authResult               //表单权限
     * @param  {Object}    page                     //分页
     * @param  {Object}    marketList               //商城大盘概览数据
     * @param  {Object}    shop_flow                //商城流量来源分析字段
     * @param  {Object}    shop_funel               //商城商品整体购买漏斗
     * @param  {Array}     dateList                 //商城流量来源筛选时间段数据
     * @param  {Array}     shopFolwLst              //商城流量来源分析表单数据
     * @param  {Array}     shop_mail_funnel         //商城商品整体购买漏斗数据
     * @param  {Object}    shop_search              //商城搜索指标数据展示筛选字段
     * @param  {Array}     shopSearchList           //商城搜索指标数据
     * @param  {Object}    shop_dalte               //商城搜索关键词分析筛选字段
     * @param  {Array}     shopDelateList           //商城搜索关键词表单数据
     * @param  {Object}    shop_mail                //商城搜索购买漏斗筛选字段
     * @param  {Object}    shop_banner              //banner筛选字段
     * @param  {Array}     shopBannerList           //banner数据展示数据
     * @param  {Object}    shop_banner_fx           //单个banner分析筛选字段
     * @param  {Array}     shopSingLeBanner         //单个banner分析表单数据
     * @param  {Object}    shop_jing                //金刚区筛选字段
     * @param  {Object}    shop_jing_fx             //金刚区分析筛选字段
     * @param  {Array}     shopJingList             //单个金刚区分析表单数据
     * @param  {Object}    shop_zero                //0元购数据展示筛选字段
     * @param  {Array}     shopZeroList             //0元购数据展示数据
     * @param  {Object}    shop_zero_funner         //0元购邀请好友漏斗数据
     * @param  {Object}    shop_ms                  //秒杀商品数据展示筛选字段
     * @param  {Array}     shopSeckill              //秒杀商品数据展示表单数据
     * @param  {Object}    shop_seckill             //秒杀商品漏斗筛选字段
     * @param  {Object}    shop_active              //活动区筛选字段
     * @param  {Object}    shop_active_fx           //活动区分析筛选字段
     * @param  {Array}     shopActiveList           //活动区数据展示表单数据
     * @param  {Array}     shopActiveFxList         //活动区数据分析表单数据
     * @param  {Array}     shopHomeList             //商城首页数据展示表单数据
     * @param  {Object}    shop_home                //商城首页数据展示筛选字段
     * @param  {Object}    shop_code                //获取邀请码页面筛选字段
     * @param  {Array}     shopCodeList             //获取邀请码页面表单数据
     */
    mixins: [back],
    components: {
        shopHead,
        imgPreview
    },
    data () {
        // GMV (营业额 <-> 0元购) 订单量 客单价 人均查看数量 商城访客 新增访客数 下单人数 转化率 (退款人数<-退款订单数->退款金额)
        return {
            list: [],
            //数据切换
            shopBigData: {},
            shopOrder: {},
            shopGmv: {},
            shopNumber: {},
            markIndex: 0,
            shopIndex: 0,
            gmvIndex: 0,
            orderIndex: 0,
            //数据切换
            Interface: [
                '/student/statistic_shop%5Cget_order_money',//GMV
                '/student/statistic_shop%5Cget_order_pay_money',//营业额
                '/student/statistic_shop%5Cget_order_count',//订单量
                '/student/statistic_shop%5Cget_order_per_money',//客单价
                '/student/statistic_shop%5Cget_avg_goods_visit',//人均查看数量
                '/student/statistic_shop%5Cget_shop_index_view_user_count',//商城访客
                '/student/statistic_shop%5Cget_new_user_visit',//新增访客
                '/student/statistic_shop%5Cget_order_pay_user_count',//下单人数
                '/student/statistic_shop%5Cget_order_trans_percent',//转化率
                '/student/statistic_shop%5Cget_order_refund_count',//退款人数
                '/student/statistic_shop%5Cget_order_refund_user_count',//退款订单数
                '/student/statistic_shop%5Cget_order_refund_money',//退款金额
                // '/student/statistic_shop%5Cget_order_free_money',//0元购
                // '/student/statistic_shop%5Cget_self_order_pay_money',//自营营业额
                '/student/statistic_shop%5Cget_self_order_money',//自营GMV
                '/student/statistic_shop%5Cget_self_order_count'//自营订单数
            ],
            rande_index: 0,
            rangeList: [],
            range_type: '',
            shopMenu: [{
                value: 'click_num',
                label: '点击量'
            },{
                value: 'order_num',
                label: '订单量'
            },{
                value: 'pay_money',
                label: '营业额'
            },{
                value: 'trans_rate',
                label: '转化率'
            },{
                value: 'collect_num',
                label: '收藏量'
            },{
                value: 'refund_num',
                label: '退款订单数'
            }],
            shop_head: {
                search_title: '商城搜索指标',
                banner: 'banner',
                jing: '金刚区',
                zero: '0元购',
                ms: '限时秒杀',
                active: '活动区',
                home: '商城首页',
                code: '获取邀请码页面',
                people: '折扣专区',
                range: '排名前100商品'
            },
            shop_title: {
                renderHeader14: JSON.stringify({label:'点击率',popover: '指单个活动区的点击量/所有活动区的点击量之和'}),
                renderHeader13: JSON.stringify({label:'点击率',popover: '此banner的点击量/整个banner区域的浏览量'}),
                renderHeader12: JSON.stringify({label:'点击率',popover: '指单个金刚区的点击量/所有金刚区的点击量之和'}),
            },
            menuScrollTop: [],
            menuIndex: 0,
            navHeight: 0,
            navList: [],
            //图表
            is_head: true,
            //商城大盘
            shop_list: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //折扣专区
            shopPeopleList: {},
            shop_people: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shopActivePeople: {},
            active_people:{
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //获取邀请码页面
            shopCodeList: {},
            shop_code: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //商城首页指标
            shopHomeList: {},
            shop_home: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //活动区
            active_count: 0,
            shop_active_fx: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shopActiveFxList: [],
            shopActiveList: {},
            shop_active: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //限时秒杀
            seckillIntive: {},
            shop_seckill: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shopSeckill: {},
            shop_ms: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //0元购
            inviteList: {},
            shop_zero_funner: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shopZeroList: {},
            shop_zero: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //金刚区
            jingCount: 0,
            shopJingList: [],
            shopJingData: {},
            shop_jing: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shop_jing_fx: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //banner
            shopSingLeBanner: [],
            shop_banner_fx: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shopBannerList: {},
            shop_banner: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //商城搜索指标
            shopInvite: {},
            shopDelateList: [],
            shop_mail: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shop_dalte: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shop_search: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shopSearchList: {},
            // 商城大盘
            order_list: {},
            echartsIndex: '',
            echartsList: [],
            echartstype: 2,
            dialogVisible: false,
            shop_mail_funnel: {},
            dateList: [{
                value: '',
                label: '时间段'
            },{
                value: '1',
                label: '上周'
            },{
                value: '2',
                label: '本周'
            },{
                value: '3',
                label: '上月'
            },{
                value: '4',
                label: '本月'
            }],
            shop_funel: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            shop_flow: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            type: '',
            shopFolwLst: [],
            marketList: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            authResult: {}
        };
    },
    filters: {
        formatMoney (val) {
            return Number(val).toFixed(2);
        },
        setCon (val) { //转化率
            if (val == 0) {
                return '0%';
            } else {
                return val.toFixed(2) + '%';
            }
        },
        isNaN (val) {
            if (isNaN(val)) {
                return 0;
            } else {
                return val;
            }
        },
    },
    computed: {},
    watch: {},
    /**
     *   auth_order_money: GMV
     *   auth_order_pay_money: 营业额
     *   auth_order_refund_money: 退款金额
     *   auth_order_user_count: 下单人数
     *   auth_order_refund_user_count: 退款人数
     *   auth_order_pay_user_count: 订单量
     *   auth_order_refund_count: 退款订单数
     *   auth_order_per_money: 客单价
     *   auth_view_user_count: 商城访客
     *   auth_order_trans_percent: 转化率
     *   auth_app_type: 商城流量来源分析
     *   auth_app_goods: 商城商品整体购买漏斗
     *   auth_search: 商城搜索数据展示,
     *   auth_search_keyword: 搜索关键词分析,
     *   auth_search_buy: 搜索购买漏斗,
     *   auth_banner: banner数据展示
     *   auth_single_banner: 单个banner分析
     *   auth_custom_area: 金刚区数据展示
     *   auth_single_custom_area: 单个金刚区分析
     *   auth_goods_free: 0元购数据展示
     *   auth_free_invite: 0元购邀请好友漏斗
     *   auth_flash_sale: 限时秒杀数据展示
     *   auth_flash_sale_invite: 秒杀商品购买漏斗
     *   auth_activity: 活动区数据展示
     *   auth_single_activity: 单个活动区分析
     *   auth_shop_home: 商城首页
     *   auth_invite_code: 邀请码
     *   auto_new_user: 折扣专区数据分析
     *   auto_user_buy: 折扣专区购买漏斗
     */
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城数据大盘'}]);
        this.authResult = this.$route.meta.authResult;
        this.getOrderList(3);//商城概览
        this.getShopSearch(this.getDate(0), this.getDate(1));//获取商城搜索数据展示
        this.getShopFolw(this.getDate(0), this.getDate(1));//商城流量来源分析
        this.getFunnel(this.getDate(0), this.getDate(1));//商城商品整体购买漏斗
        this.getSearchKeyword(this.getDate(0), this.getDate(1));//搜索关键词分析
        this.getSearchinvite(this.getDate(0), this.getDate(1));//获取搜索购买统计

        setTimeout(()=> {
            this.getBannerList(this.getDate(0), this.getDate(1));//banner
            this.getSinglebanner(this.getDate(0), this.getDate(1), 1);//单个banner分析
            this.getJingList(this.getDate(0), this.getDate(1));//获取金刚区数据展示
            this.fnGetJingView(this.getDate(0), this.getDate(1));//获取单个金刚区分析
            this.getZeroList(this.getDate(0), this.getDate(1));//获取0元购数据
            this.getZeroInvite(this.getDate(0), this.getDate(1));//获取0元购邀请好友漏斗
        },1000);

        setTimeout(() => {
            this.getSeckill(this.getDate(0), this.getDate(1));//获取秒杀数据展示
            this.getSeckillInvite(this.getDate(0), this.getDate(1));//获取秒杀购买漏斗数据
            this.getActivelist(this.getDate(0), this.getDate(1));//获取活动区数据展示
            this.getActiveInvite(this.getDate(0), this.getDate(1));//获取单个活动区分析
            this.getShopHome(this.getDate(0), this.getDate(1));//获取商城首页统计数据
            // this.getCodeList(this.getDate(0), this.getDate(1));//获取邀请码数据
            this.getPeoPleList(this.getDate(0), this.getDate(1));//获取折扣专区数据分析
            this.getActivePeople(this.getDate(0), this.getDate(1));//获取折扣专区购买漏斗
        },2000);
        this.fnChangeRange({value: 'click_num'}, 0);
        this.getScrollTop();
        // console.log(this.authResult, '列表权限');
    },
    methods: {
        /**
         * 获取商城大盘数据
         * Interface: [(GMV<->自营GMV) (营业额<->0元购<->自营营业额) (订单量<->自营商品订单量) 客单价 人均查看数量 商城访客 新增访客数 下单人数 转化率 (退款人数<-退款订单数->退款金额)]
         */
        getOrderList (type, start_time, end_time) { //type 1:每日数据 2:时间段数据 3:正常数据
            let marketList = [{
                icon: 'el-icon-hand-GAM',
                title: 'GMV',
                today: '',
                yesterday: '',
                tips: '指拍下订单的总金额（含待付款未支付的订单金额与退款金额）',
                auth: true,
                is_icon: true
            },{
                icon: 'el-icon-hand-yingyee',
                title: '营业额',
                today: '',
                yesterday: '',
                tips: '除淘客0元购之外的所有类型商品的实付款的总和',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-dingdanliang',
                title: '订单量',
                today: '',
                yesterday: '',
                tips: '指当日内支付成功的订单数，不去除退款订单',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-kedanjia',
                title: '客单价',
                today: '',
                yesterday: '',
                tips: '（营业额-0元购的支付总金额）/（下单人数-只在0元购下单的人数）',
                auth: true,
                is_icon: true
            },{
                icon: 'el-icon-hand-yingyee',
                title: '人均查看数',
                today: '',
                yesterday: '',
                tips: '指当日所有商品详情页浏览量的总和/当日商城访客',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-shangchengfangke',
                title: '商城访客',
                today: '',
                yesterday: '',
                tips: '指当日内访问过商城首页的用户数',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-shangchengfangke',
                title: '新增访客',
                today: '',
                yesterday: '',
                tips: '指当日内商城访客中的新注册的用户数',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-xiadanrenshu',
                title: '下单人数',
                today: '',
                yesterday: '',
                tips: '指当日内发起订单并成功支付的人数，不去除退款人数',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-zhuanhuashuai',
                title: '转化率',
                today: '',
                yesterday: '',
                tips: '下单人数/商城访客',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-tuikuandingdanshu',
                title: '退款订单数',
                today: '',
                yesterday: '',
                tips: '指当日内退款成功的总订单数',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-tuikuanrenshu',
                title: '退款人数',
                today: '',
                yesterday: '',
                tips: '指当日内退款成功的总人数',
                auth: true,
                is_icon: false
            },{
                icon: 'el-icon-hand-tuikuanjine',
                title: '退款金额',
                today: '',
                yesterday: '',
                tips: '指当日内退款成功的总金额',
                auth: true,
                is_icon: true
            },{
                icon: 'el-icon-hand-GAM',
                title: '自营商品GMV',
                today: '',
                yesterday: '',
                tips: '拼团商品+秒杀商品+折扣专区商品+合作淘客商品的GMV总和',
                auth: true,
                is_icon: true
            },{
                icon: 'el-icon-hand-dingdanliang',
                title: '自营商品订单量',
                today: '',
                yesterday: '',
                tips: '指当日内支付成功的订单数，不去除退款订单',
                auth: true,
                is_icon: false
            }];

            // const time_stamp = 60 * 60 * 24 * 1000;
            // let temp = this.setDate(new Date(this.shop_list.date).getTime());
            // this.getShopFolw(temp, temp + time_stamp);

            //接口数据判断
            let data = {};

            if (Number(type) === 3) {
                data = {
                    type: 1
                };
            } else {
                data = {
                    type: 16,
                    start_time: start_time / 1000,
                    end_time: end_time / 1000
                };
            }

            const InterList = function (_this,data) {
                let auth = [];

                for(let i in _this.authResult) {
                    auth.push(_this.authResult[i]);
                }

                for (let i=0; i<_this.Interface.length; i++) {
                    _this.$post(_this.Interface[i], {
                        ...data
                    }, resp => {
                        if (resp.code == 1) {
                            if(type == 3) {
                                marketList[i].today = resp.data.today;
                                marketList[i].yesterday = resp.data.yesterday;
                            } else if (type == 1 || type == 2) {
                                marketList[i].today = resp.data.range_count;
                            }
                            marketList[i].auth = auth[i];
                        } else {
                            this.$message({
                                type: 'waring',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                }
                return marketList;
            }(this,data);

            this.marketList = InterList;

            // 退款订单数数据切换
            this.shopOrder = {
                refundNumber: this.marketList[this.marketList.length - 5],//退款人数
                refundOrder: this.marketList[this.marketList.length - 4],//退款订单数
                refundMoney: this.marketList[this.marketList.length - 3]//退款金额
            };

            //GMV数据切换
            this.shopGmv = {
                gmv: this.marketList[0],
                shopGmv: this.marketList[this.marketList.length - 2]
            };

            //订单量数据切换
            this.shopNumber = {
                order: this.marketList[2],
                shopOrder: this.marketList[this.marketList.length - 1]
            };

            // console.log(this.marketList, 'data');

        },

        /**
         * 切换数据,默认存储数据源，改变指定未知对应数据
         */
        fnChangeData (index) {
            if(index == 0) {
                this.gmvIndex++;
                if (this.gmvIndex === 2) {
                    this.gmvIndex = 0;
                }
                if(this.gmvIndex == 0) {
                    this.marketList[0] = this.shopGmv.gmv;
                } else if (this.gmvIndex == 1) {
                    this.marketList[0] = this.shopGmv.shopGmv;
                }
            } else if (index == 2) {
                this.orderIndex++;
                if (this.orderIndex === 2) {
                    this.orderIndex = 0;
                }
                if(this.orderIndex == 0) {
                    this.marketList[2] = this.shopNumber.order;
                } else if (this.orderIndex == 1) {
                    this.marketList[2] = this.shopNumber.shopOrder;
                }
            } else if (index >= 9) { //订单数
                this.markIndex++;

                console.log(this.shopOrder, 'markIndex');
                this.markIndex = this.markIndex == 3 ? 0 : this.markIndex;

                if (this.markIndex == 0) {
                    this.marketList[9] = {
                        icon: 'el-icon-hand-tuikuanrenshu',
                        title: '退款人数',
                        today: this.shopOrder.refundOrder.today,
                        yesterday: this.shopOrder.refundOrder.yesterday,
                        tips: '指当日内退款成功的总人数',
                        auth: true,
                        is_icon: false
                    };
                } else if(this.markIndex == 1) {
                    this.marketList[9] = {
                        icon: 'el-icon-hand-tuikuandingdanshu',
                        title: '退款订单数',
                        today: this.shopOrder.refundNumber.today,
                        yesterday: this.shopOrder.refundNumber.yesterday,
                        tips: '指当日内退款成功的总订单数',
                        auth: true,
                        is_icon: false
                    };
                } else if(this.markIndex == 2) {
                    this.marketList[9] = {
                        icon: 'el-icon-hand-tuikuanjine',
                        title: '退款金额',
                        today: this.shopOrder.refundMoney.today,
                        yesterday: this.shopOrder.refundMoney.yesterday,
                        tips: '指当日内退款成功的总金额',
                        auth: true,
                        is_icon: true
                    };
                }
            }
            //解决数据不更新
            this.marketList = this.marketList.slice();
        },

        /**
         * 切换前100数据
         */
        fnChangeRange(item,index) {
            this.rande_index = index;
            this.range_type = index;
            this.$post('/student/shop_goods_rank%5Cget_rank_list', {
                type: item.value
            },resp => {
                if(resp.code == 1) {
                    this.rangeList = resp.data.list;
                } else {
                    this.$message({
                        title: resp.msg,
                        message: 'waring'
                    });
                }
            });
        },

        /**
         * 跳转商品页
         */
        fnGoShopDetail (row) {
            if (row.goods_type == 'new_user') { //折扣专区
                this.$router.replace({
                    name: 'shopPeoPle',
                    query: {
                        title: row.goods_title
                    }
                });
            } else if (row.goods_type == 'e_ticket') { //商圈
                this.$router.replace({
                    name: 'GoodsList',
                    query: {
                        goods_title: row.goods_title,
                        goods_type: 'e_ticket'
                    }
                });
            } else if (row.goods_type == 'flash_sale') { //秒杀
                this.$router.replace({
                    name: 'SeckillShop',
                    query: {
                        title: row.goods_title
                    }
                });
            } else if (row.goods_type == 'tao') { //淘宝
                this.$router.replace({
                    name: 'GoodsList',
                    query: {
                        goods_title: row.goods_title,
                        goods_type: 'tao'
                    }
                });
            } else if (row.goods_type == 'self') { //自营
                this.$router.replace({
                    name: 'GoodsList',
                    query: {
                        goods_title: row.goods_title,
                        goods_type: 'self'
                    }
                });
            } else {
                this.$message({
                    type: 'waring',
                    message: '该商品已被删除'
                });
            }
        },

        /**
         * 查看最近数据概览
         */
        fnShowDialog (index, param) {
            let idx = '';

            // Interface: [
            //     '/student/statistic_shop%5Cget_order_money',//GMV
            //     '/student/statistic_shop%5Cget_order_pay_money',//营业额
            //     '/student/statistic_shop%5Cget_order_count',//订单量
            //     '/student/statistic_shop%5Cget_order_per_money',//客单价
            //     '/student/statistic_shop%5Cget_avg_goods_visit',//人均查看数量
            //     '/student/statistic_shop%5Cget_shop_index_view_user_count',//商城访客
            //     '/student/statistic_shop%5Cget_new_user_visit',//新增访客
            //     '/student/statistic_shop%5Cget_order_pay_user_count',//下单人数
            //     '/student/statistic_shop%5Cget_order_trans_percent',//转化率
            //     '/student/statistic_shop%5Cget_order_refund_count',//退款人数
            //     '/student/statistic_shop%5Cget_order_refund_user_count',//退款订单数
            //     '/student/statistic_shop%5Cget_order_refund_money',//退款金额
            //     '/student/statistic_shop%5Cget_self_order_money',//自营GMV
            //     '/student/statistic_shop%5Cget_self_order_count'//自营订单数
            // ],

            // console.log(param,'param');
            if(param == '退款订单数') {
                idx = 10;
            } else if (param == '退款金额') {
                idx = 11;
            } else if (param == '退款人数') {
                idx = 9;
            } else if (param == '营业额') {
                idx = 1;
            } else if (param == '自营商品GMV') {
                idx = 12;
            } else if (param == '自营商品订单量') {
                idx = 13;
            } else {
                idx = index;
            }

            this.getEcharts(idx, 2).then(resp => {
                let list = resp;

                this.is_head = true;
                this.echartsIndex = idx;
                this.echartstype = 2;

                setTimeout(()=>{
                    this.setEcharts(list);
                },400);

                this.dialogVisible = !this.dialogVisible;
            });

            // let list = this.getEcharts(idx, 2);


        },

        /**
         * 图表数据切换
         */
        fnGetChart (event) {
            this.getEcharts(this.echartsIndex, event).then(resp => {
                let list = resp;

                if (event == 4) {
                    list[0] = ['上上周', '上周', '本周'];
                }

                setTimeout(()=>{
                    this.setEcharts(list);
                },500);
            });
        },

        /**
         * 获取图表数据
         */
        getEcharts (index, type) {
            let url = this.Interface[index],
                x_data = [],
                y_data = [];

            return new Promise((resolve,reject) => {
                this.$post(url,{
                    type: type
                }, resp => {
                    if (resp.code == 1) {
                        if (type == 2 && resp.data.day_list.length > 0) {
                            resp.data.day_list.map(item => {
                                x_data.unshift(this.setTemp(item.time));
                                y_data.unshift(parseInt(item.count));
                            });
                        }else if (type == 4 && resp.data.week_list.length > 0) {
                            resp.data.week_list.map(item => {
                                // x_data.unshift(this.setTemp(item.time));
                                y_data.unshift(parseInt(item.count));
                            });
                        }else if (type == 8 && resp.data.month_list.length > 0) {
                            resp.data.month_list.map(item => {
                                x_data.unshift(this.setTemp(item.time));
                                y_data.unshift(parseInt(item.count));
                            });
                        }else {
                            return [];
                        }

                        resolve([
                            x_data,
                            y_data
                        ]);

                    } else {
                        this.$message({
                            type: 'waring',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });

            // return [
            //     x_data,
            //     y_data
            // ];
        },

        /**
         * @deprecated 数据获取
         */
        getEchartList (url, type) {


        },

        /**
         * 日期转换
         */
        setTemp (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth() + 1,
                day = new Date(temp * 1000).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        },

        /**
         * 设置图表
         */
        setEcharts (row) {
            let echarts = document.getElementById('echarts_al');
            let my_echarts = this.$echarts.init(echarts);
            let tip = this.is_head ? '新增数据' : '点击次数';

            my_echarts.setOption({
                color:['#1890FF'],
                tooltip: {
                    trigger: 'axis'
                },
                // legend: {
                //     data: ['新增数据'],
                //     left: 18,
                //     top: 10
                // },
                //操作
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            show: false
                        },
                        dataView: {
                            readOnly: true
                        },
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    },
                    left: 28,
                    height: 8
                },
                //图表位置
                grid: {
                    top: 75,
                    bottom: 20,
                    height: 180
                },
                //x轴数据
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: row[0]
                },
                //y轴数据
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: tip,
                        type:'line',
                        data: row[1],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            });
        },


        /**
         * 数据筛选
         * 1:商城流量来源分析
         * 2:商城商品整体购买漏斗
         * 3:商城搜索数据展示
         * 4:搜索关键词分析
         * 5:搜索购买漏斗
         * 6:banner-数据展示
         * 7:banner分析
         * 8:金刚区数据展示
         * 9:单个金刚区分析
         * 10:0元购数据展示
         * 11:0元购邀请好友漏斗
         * 12:秒杀数据展示
         * 13:秒杀购买邀请漏斗
         * 14:活动区数据展示
         * 15:单个活动区分析
         * 16:商城首页
         * 17:邀请码
         * 18:折扣专区数据分析
         */
        fnFilterData (type) {
            if(type == 20) {
                if(this.shop_list.date === null || this.shop_list.date == '' || this.shop_list.date.length < 1) {
                    this.getOrderList(1, this.getDate(0), this.getDate(1));
                }else {
                    this.getOrderList(1, getDate(new Date(this.shop_list.date[0])) * 1000, getDate(new Date(this.shop_list.date[1])) * 1000);
                }
            } else if (type == 1) {
                if(this.shop_flow.date === null || this.shop_flow.date == '' || this.shop_flow.date.length < 1) {
                    this.getShopFolw(this.getDate(0), this.getDate(1));
                }else {
                    this.getShopFolw(getDate(new Date(this.shop_flow.date[0])) * 1000, getDate(new Date(this.shop_flow.date[1])) * 1000);
                }
            } else if (type == 2) {
                if(this.shop_funel.date === null || this.shop_funel.date == '' || this.shop_funel.date.length < 1) {
                    this.getFunnel(this.getDate(0), this.getDate(1));
                }else {
                    this.getFunnel(getDate(new Date(this.shop_funel.date[0])) * 1000, getDate(new Date(this.shop_funel.date[1])) * 1000);
                }
            } else if (type == 3) {
                if(this.shop_search.date === null || this.shop_search.date == '' || this.shop_search.date.length < 1) {
                    this.getShopSearch(this.getDate(0), this.getDate(1));
                }else {
                    this.getShopSearch(getDate(new Date(this.shop_search.date[0])) * 1000, getDate(new Date(this.shop_search.date[1])) * 1000);
                }
            } else if (type == 4) {
                if(this.shop_dalte.date === null || this.shop_dalte.date == '' || this.shop_dalte.date.length < 1) {
                    this.getSearchKeyword(this.getDate(0), this.getDate(1));
                }else {
                    this.getSearchKeyword(getDate(new Date(this.shop_dalte.date[0])) * 1000, getDate(new Date(this.shop_dalte.date[1])) * 1000);
                }
            } else if (type == 5) {
                if(this.shop_mail.date === null || this.shop_mail.date == '' || this.shop_mail.date.length < 1) {
                    this.getSearchinvite(this.getDate(0), this.getDate(1));
                }else {
                    this.getSearchinvite(getDate(new Date(this.shop_mail.date[0])) * 1000, getDate(new Date(this.shop_mail.date[1])) * 1000);
                }
            } else if (type == 6) {
                if(this.shop_banner.date === null || this.shop_banner.date == '' || this.shop_banner.date.length < 1) {
                    this.getBannerList(this.getDate(0), this.getDate(1));
                }else {
                    this.getBannerList(getDate(new Date(this.shop_banner.date[0])) * 1000, getDate(new Date(this.shop_banner.date[1])) * 1000);
                }
            } else if (type == 7) {
                if(this.shop_banner_fx.date === null || this.shop_banner_fx.date == '' || this.shop_banner_fx.date.length < 1) {
                    this.getSinglebanner(this.getDate(0), this.getDate(1), 1);
                }else {
                    this.getSinglebanner(getDate(new Date(this.shop_banner_fx.date[0])) * 1000, getDate(new Date(this.shop_banner_fx.date[1])) * 1000, 1);
                }
            } else if (type == 8) {
                if(this.shop_jing.date === null || this.shop_jing.date == '' || this.shop_jing.date.length < 1) {
                    this.getJingList(this.getDate(0), this.getDate(1));
                }else {
                    this.getJingList(getDate(new Date(this.shop_jing.date[0])) * 1000, getDate(new Date(this.shop_jing.date[1])) * 1000);
                }
            } else if (type == 9) {
                if(this.shop_jing_fx.date === null || this.shop_jing_fx.date == '' || this.shop_jing_fx.date.length < 1) {
                    this.fnGetJingView(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetJingView(getDate(new Date(this.shop_jing_fx.date[0])) * 1000, getDate(new Date(this.shop_jing_fx.date[1])) * 1000);
                }
            } else if (type == 10) {
                if(this.shop_zero.date === null || this.shop_zero.date == '' || this.shop_zero.date.length < 1) {
                    this.getZeroList(this.getDate(0), this.getDate(1));
                }else {
                    this.getZeroList(getDate(new Date(this.shop_zero.date[0])) * 1000, getDate(new Date(this.shop_zero.date[1])) * 1000);
                }
            } else if (type == 11) {
                if(this.shop_zero_funner.date === null || this.shop_zero_funner.date == '' || this.shop_zero_funner.date.length < 1) {
                    this.getZeroInvite(this.getDate(0), this.getDate(1));
                }else {
                    this.getZeroInvite(getDate(new Date(this.shop_zero_funner.date[0])) * 1000, getDate(new Date(this.shop_zero_funner.date[1])) * 1000);
                }
            } else if (type == 12) {
                if(this.shop_ms.date === null || this.shop_ms.date == '' || this.shop_ms.date.length < 1) {
                    this.getSeckill(this.getDate(0), this.getDate(1));
                }else {
                    this.getSeckill(getDate(new Date(this.shop_ms.date[0])) * 1000, getDate(new Date(this.shop_ms.date[1])) * 1000);
                }
            } else if (type == 13) {
                if(this.shop_seckill.date === null || this.shop_seckill.date == '' || this.shop_seckill.date.length < 1) {
                    this.getSeckillInvite(this.getDate(0), this.getDate(1));
                }else {
                    this.getSeckillInvite(getDate(new Date(this.shop_seckill.date[0])) * 1000, getDate(new Date(this.shop_seckill.date[1])) * 1000);
                }
            } else if (type == 14) {
                if(this.shop_active.date === null || this.shop_active.date == '' || this.shop_active.date.length < 1) {
                    this.getActivelist(this.getDate(0), this.getDate(1));
                }else {
                    this.getActivelist(getDate(new Date(this.shop_active.date[0])) * 1000, getDate(new Date(this.shop_active.date[1])) * 1000);
                }
            } else if (type == 15) {
                if(this.shop_active_fx.date === null || this.shop_active_fx.date == '' || this.shop_active_fx.date.length < 1) {
                    this.getActiveInvite(this.getDate(0), this.getDate(1));
                }else {
                    this.getActiveInvite(getDate(new Date(this.shop_active_fx.date[0])) * 1000, getDate(new Date(this.shop_active_fx.date[1])) * 1000);
                }
            } else if (type == 16) {
                if(this.shop_home.date === null || this.shop_home.date == '' || this.shop_home.date.length < 1) {
                    this.getShopHome(this.getDate(0), this.getDate(1));
                }else {
                    this.getShopHome(getDate(new Date(this.shop_home.date[0])) * 1000, getDate(new Date(this.shop_home.date[1])) * 1000);
                }
            } else if (type == 17) {
                if(this.shop_code.date === null || this.shop_code.date == '' || this.shop_code.date.length < 1) {
                    this.getCodeList(this.getDate(0), this.getDate(1));
                }else {
                    this.getCodeList(getDate(new Date(this.shop_code.date[0])) * 1000, getDate(new Date(this.shop_code.date[1])) * 1000);
                }
            } else if (type == 18) {
                if(this.shop_people.date === null || this.shop_people.date == '' || this.shop_people.date.length < 1) {
                    this.getPeoPleList(this.getDate(0), this.getDate(1));
                }else {
                    this.getPeoPleList(getDate(new Date(this.shop_people.date[0])) * 1000, getDate(new Date(this.shop_people.date[1])) * 1000);
                }
            } else if (type == 19) {
                if(this.active_people.date === null || this.active_people.date == '' || this.active_people.date.length < 1) {
                    this.getActivePeople(this.getDate(0), this.getDate(1));
                }else {
                    this.getActivePeople(getDate(new Date(this.active_people.date[0])) * 1000, getDate(new Date(this.active_people.date[1])) * 1000);
                }
            }
        },

        /**
         * 商城流量来源分析
         */
        getShopFolw (start_time, end_time) {
            let list = [];

            this.$post('/student/statistic_shop%5Cget_app_type_statistic', {
                start_time: parseInt(start_time / 1000),
                end_time: parseInt(end_time / 1000)
            }, resp => {
                if (resp.code == 1) {
                    for(let key in resp.data) {
                        list.push({
                            origin: key,
                            view_user_count: resp.data[key]['view_user_count'],
                            order_user_count: resp.data[key]['order_user_count']
                        });
                    }
                    this.shopFolwLst = list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 商城商品整体购买漏斗
         */
        getFunnel (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_goods_buy_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.order_list = resp.data;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取商城搜索数据展示
         */
        getShopSearch (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_search_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopSearchList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 搜索关键词分析
         */
        getSearchKeyword (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_search_keyword_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopDelateList = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 搜索购买漏斗
         */
        getSearchinvite (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_search_buy_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopInvite = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取banner数据
         */
        getBannerList (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_banner_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopBannerList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取单个banner分析
         */
        getSinglebanner (start_time, end_time, type) {
            this.$post('/student/statistic_shop%5Cget_single_banner_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000,
                // end_time: end_time / 1000,//结束时间调整为当前时间，时间颗粒度为1小时，防止数据量过多
                type: type
            }, resp => {
                if (resp.code == 1) {
                    this.shopSingLeBanner = resp.data.banner_list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 查看单个banner分析24小时数据
         */
        fnGetbannerView (row) {
            let x_data = [],
                y_data = [];

            this.is_head = false;
            this.$post('/student/statistic_shop%5Cget_single_banner_statistic',{
                start_time: row.start_time,
                end_time: row.end_time,
                type: 2,
                banner_no: row.banner_no
            }, resp => {
                if (resp.code == 1) {
                    resp.data.banner_view_list.map(item => {
                        x_data.push(this.gethous(item.time));
                        y_data.push(item.click_count);
                    });
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });

            setTimeout(()=>{
                this.setEcharts([
                    x_data,
                    y_data
                ]);
            },500);

            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * 获取金刚区数据展示
         */
        getJingList (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_custom_area_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopJingData = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取单个金刚区分析
         */
        fnGetJingView (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_single_custom_area_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    let count = 0;

                    this.shopJingList = resp.data.custom_area_list;
                    this.shopJingList.map(item => {
                        count += item.click_count;
                    });
                    this.jingCount = count;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取0元购数据
         */
        getZeroList (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_goods_free_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopZeroList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取0元购邀请好友漏斗
         */
        getZeroInvite (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_goods_free_invite_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.inviteList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取秒杀数据展示
         */
        getSeckill (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_goods_flash_sale_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopSeckill = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取秒杀商品购买漏斗
         */
        getSeckillInvite (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_goods_flash_sale_buy_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.seckillIntive = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取活动区数据展示
         */
        getActivelist (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_activity_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopActiveList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取单个活动区分析
         */
        getActiveInvite (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_single_activity_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    let count = 0;

                    resp.data.activity_list.map(item => {
                        count += item.click_count;
                    });

                    this.active_count = count;
                    this.shopActiveFxList = resp.data.activity_list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取商城首页统计数据
         */
        getShopHome (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_index_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopHomeList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取邀请码数据
         */
        getCodeList (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_invite_code_get_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopCodeList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 折扣专区数据分析
         */
        getPeoPleList (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_goods_new_user_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopPeopleList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 新人商品购买漏斗
         */
        getActivePeople (start_time, end_time) {
            this.$post('/student/statistic_shop%5Cget_goods_new_user_buy_statistic',{
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.shopActivePeople = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 当天时间戳转当日0点时间戳
         */
        setDate (no) {
            let year = new Date(no).getFullYear(),
                month = new Date(no).getMonth()+1,
                day = new Date(no).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            let date = year + '-' + month + '-' + day + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 获取本周周一零点时间戳
         */
        getMondayTemp () {
            let date = new Date().getDay();
            let temp = null;

            switch (date % 7) {
                case 1:
                    temp = this.getDate(0);
                    break;
                case 2:
                    temp = this.getDate(-1);
                    break;
                case 3:
                    temp = this.getDate(-2);
                    break;
                case 4:
                    temp = this.getDate(-3);
                    break;
                case 5:
                    temp = this.getDate(-4);
                    break;
                case 6:
                    temp = this.getDate(-5);
                    break;
                case 0:
                    temp = this.getDate(-6);
                    break;
                default:
                    break;
            }
            return temp;
        },

        /**
         * 获取本月/上月一号0点时间戳
         * param: 1_本月 0:上月
         */
        getMonthtemp (param) {
            let year = new Date().getFullYear(),
                month = new Date().getMonth() + 1;

            if (param == 0) {
                if (month - 1 == 0) {
                    month = 12;
                    year = year - 1;
                } else {
                    month = month - 1;
                }
            }
            month = month < 10 ? '0' + month : month;

            let date = year + '-' + month + '-01' + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 时间戳转小时
         */
        gethous (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth()+1,
                day = new Date(temp * 1000).getDate(),
                h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s;
        },

        /**
         * 查看图片
         */
        fnShowPreview(images) {
            this.$refs.preview.show([images]);
        },

        /**
         * 获取对应菜单栏距顶部高度
         *  auth_search: 商城搜索数据展示,
        *   auth_search_keyword: 搜索关键词分析,
        *   auth_search_buy: 搜索购买漏斗,
        *   auth_banner: banner数据展示
        *   auth_single_banner: 单个banner分析
        *   auth_custom_area: 金刚区数据展示
        *   auth_single_custom_area: 单个金刚区分析
        *   auth_goods_free: 0元购数据展示
        *   auth_free_invite: 0元购邀请好友漏斗
        *   auth_flash_sale: 限时秒杀数据展示
        *   auth_flash_sale_invite: 秒杀商品购买漏斗
        *   auth_activity: 活动区数据展示
        *   auth_single_activity: 单个活动区分析
        *   auth_shop_home: 商城首页
        *   auth_invite_code: 邀请码
         */
        getScrollTop () {
            this.$nextTick(() => {
                this.menuScrollTop = [];

                const shop_search_status = !this.authResult.auth_search && !this.authResult.auth_search_keyword && !this.authResult.auth_search_buy ? false : true,
                    shop_banner_status = !this.authResult.auth_banner && !this.authResult.auth_single_banner ? false : true,
                    shop_jing_status = !this.authResult.auth_custom_area && !this.authResult.auth_single_custom_area ? false : true,
                    shop_zero_status = !this.authResult.auth_goods_free && !this.authResult.auth_free_invite ? false : true,
                    shop_seckill_status = !this.authResult.auth_flash_sale && !this.authResult.auth_flash_sale_invite ? false : true,
                    shop_active_staus = !this.authResult.auth_activity && !this.authResult.auth_single_activity ? false : true,
                    shop_home_status = !this.authResult.auth_shop_home ? false : true,
                    shop_code_status = !this.authResult.auth_invite_code ? false : true,
                    shop_people_status = !this.authResult.auto_new_user && !this.authResult.auto_user_buy ? false : true,
                    shop_range_status = !this.authResult.auth_range ? false : true;

                const shop_search = shop_search_status ? document.getElementById('shop-search').offsetTop : 0,
                    shop_banner = shop_banner_status ? document.getElementById('shop-banner').offsetTop : 0,
                    shop_jing = shop_jing_status ? document.getElementById('shop-jing').offsetTop : 0,
                    shop_range = shop_range_status ? document.getElementById('shop-range').offsetTop : 0,
                    shop_zero = shop_zero_status ? document.getElementById('shop-zero').offsetTop : 0,
                    shop_seckill = shop_seckill_status ? document.getElementById('shop-seckill').offsetTop : 0,
                    shop_active = shop_active_staus ? document.getElementById('shop-active').offsetTop : 0,
                    shop_home = shop_home_status ? document.getElementById('shop-active').offsetTop + 100 : 0,
                    shop_code = shop_code_status ? document.getElementById('shop-active').offsetTop + 200 : 0,
                    shop_people = shop_people_status ? document.getElementById('shop-people').offsetTop + 200 : 0;
                    // shop_home = shop_home_status ? document.getElementById('shop-home').offsetTop : 0,
                    // shop_code = shop_code_status ? document.getElementById('shop-code').offsetTop : 0;

                this.menuScrollTop.push(
                    shop_range,
                    shop_search,
                    shop_banner,
                    shop_jing,
                    shop_zero,
                    shop_seckill,
                    shop_active,
                    shop_home,
                    shop_code,
                    shop_people
                );

                let list = [];

                this.menuScrollTop.map(item => {
                    if (item !== 0) {
                        list.push(item);
                    }
                });
                this.menuScrollTop = list;

                //权限菜单
                const navList = [
                    shop_range ? '排名100' : '',
                    shop_search_status ? '商城搜索' : '',
                    shop_banner_status ? 'banner' : '',
                    shop_jing_status ? '金刚区' : '',
                    shop_zero_status ? '0元购' : '',
                    shop_seckill_status ? '限时秒杀' : '',
                    shop_active_staus ? '活动区' : '',
                    shop_home_status ? '商城首页' : '',
                    shop_code_status ? '获邀请码' : '',
                    shop_people_status ? '折扣专区' : ''
                ];

                navList.map(item => {
                    if (item !== '') {
                        this.navList.push(item);
                    }
                });

                this.navHeight = this.navList.length * 50;

                let time_stamp = 0;

                window.addEventListener('scroll', () => {
                    let scrollTop = document.querySelector('.el-main').scrollTop;
                    let time = new Date().getTime();

                    if (time - time_stamp > 20) {
                        for (let i=0; i<= this.menuScrollTop.length; i++) {
                            if (i > this.menuScrollTop.length - 2) {
                                return;
                            }
                            if (this.menuScrollTop[i] !== 0) {
                                if (scrollTop <= this.menuScrollTop[0]) {
                                    this.menuIndex = 0;
                                }
                                if (scrollTop > this.menuScrollTop[i] && scrollTop <= this.menuScrollTop[i+1]) {
                                    this.menuIndex = i + 1;
                                }
                            }
                        }
                    }
                }, true);
            });
        },

        /**
         * 侧边栏折叠
         */
        fnFold () {
            this.navHeight = this.navHeight > 50 ? 50 : this.navList.length * 50;
        },

        /**
         * 点击侧边栏
         */
        fnMoveMenu (index) {
            document.querySelector('.el-main').scrollTo(0,this.menuScrollTop[index]);
        },

        /**
         * 设置表头
         */
        renderHeader(h, row){
            return h('span', {}, [
                h('span', {class: 'el-color'}, JSON.parse(row.column.label).label),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: JSON.parse(row.column.label).popover }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #F4F4F4;
        padding: 10px 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        /* 表单 */
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 商城大盘 */
    .container-market {
        display: flex;
        flex-direction: column;
        .market-content {
            display: flex;
            flex-wrap: wrap;
            margin: 0 0 10px 0;
            width: 100%;
            height: 316px;
            overflow: hidden;
            .market-content-list {
                width: calc((100% - 40px) / 5 );
                height: 153px;
                margin-left: 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                padding: 20px 15px 10px 20px;
                background: #ffffff;
                cursor: pointer;
                .market-list-head {
                    display: flex;
                    height: 22px;
                    align-items: center;
                    justify-content: space-between;
                    .market-list-icon {
                        font-size: 13px;
                    }
                    .market-list-title {
                        color:#3F454B;
                    }
                   .market-list-title:hover {
                        color: #20A0FF;
                    }
                    .el-icon-hand-tishi {
                        color: #000;
                    }
                }
                .market-list-today {
                    max-width: 220px;
                    height: 38px;
                    line-height: 38px;
                    color: #1D2023;
                    font-size: 30px;
                    font-weight: 500;
                    margin: 10px 0 20px 0;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .market-list-next {
                    width: 202px;
                    height: 1px;
                    background: #F4F4F4;
                    margin-bottom: 10px;
                }
                .market-list-yesterday {
                    display: flex;
                    height: 22px;
                    align-items: center;
                    .market-yesterday-text {
                        color: #000000;
                        font-size: 14px;
                        margin-right: 8px;
                    }
                    .market-yesterday-money {
                        color: #000000;
                        font-size: 14px;
                    }
                }
            }
            .market-no {
                display: none;
            }
            .market-content-list:nth-child(1) .market-list-icon {
                color: #2163E5;
            }
            .market-content-list:nth-child(2) .market-list-icon {
                color: #2163E5;
            }
            .market-content-list:nth-child(3) .market-list-icon {
                color: #FF6A65;
            }
            .market-content-list:nth-child(4) .market-list-icon {
                color: #07B5FE;
            }
            .market-content-list:nth-child(5) .market-list-icon {
                color: #FF6A65;
            }
            .market-content-list:nth-child(6) .market-list-icon {
                color: #07B5FE;
            }
            .market-content-list:nth-child(7) .market-list-icon {
                color: #FF6A65;
            }
            .market-content-list:nth-child(8) .market-list-icon {
                color: #01BC22;
            }
            .market-content-list:nth-child(9) .market-list-icon {
                color: #FD7D27;
            }
            .market-content-list:nth-child(10) .market-list-icon {
                color: #F2CF1F;
            }
            .market-content-list:nth-child(5n + 1) {
                margin-left: 0;
            }
            .market-content-list:nth-child(n + 6) {
                margin-top: 10px;
            }
        }
    }
    /* 数据图表 */
    .el-dialog-echarts .content_left {
        background: #ffffff;
        width: 100%;
        height: 100%;
        .content_head {
            width: 100%;
            height: 55px;
            border-bottom: 1px #E8E8E8 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .content_text {
                font-size: 16px;
                font-weight: bold;
                font-weight: bold;
                padding-left: 24px;
            }
        }
        .content_echarts {
            width: 100%;
            height: 297px;
            // border: 1px red solid;
            box-sizing: border-box;
            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
    /* 商城 */
    .main {
        width: 100%;
        display: flex;
        .main-flow {
            width: calc((100% - 10px) / 2);
            padding: 12px 15px 25px 15px;
            box-sizing: border-box;
            background: #ffffff;
            .main-content {
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 9px;
                &-title {
                   color: #000000;
                   font-size: 14px;
                }
            }
            .main-seat {
                width: 100%;
                height: 1px;
                background: #F4F4F4;
                margin-bottom: 15px;
            }
        }
        .main-funnel {
            width: calc((100% - 10px) / 2);
            padding: 12px 15px 30px 15px;
            box-sizing: border-box;
            background: #ffffff;
            margin-left: 10px;
            .main-content {
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 9px;
                &-title {
                   color: #000000;
                   font-size: 14px;
                }
            }
            .main-seat {
                width: 100%;
                height: 1px;
                background: #F4F4F4;
                margin-bottom: 30px;
            }
            .main-funnel-cont {
                padding: 30px 100px 30px 101px;
                display: flex;
                height: 132px;
                align-items: center;
                justify-content: center;
                .main-cont-list {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .main-list-title {
                        color: #000000;
                        font-size: 14px;
                        height: 22px;
                        line-height: 22px;
                        margin-bottom: 10px;
                    }
                    .main-list-cont {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        background: #64B76D;
                        .main-list-ratio {
                            height: 40px;
                            line-height: 40px;
                            color: #ffffff;
                            font-size: 20px;
                            margin-top: 19px;
                            font-weight: 500;
                        }
                        .main-list-number {
                            height: 22px;
                            line-height: 22px;
                            color: #ffffff;
                            font-size: 14px;
                        }
                    }
                    .mail {
                        background: #EAAC50;
                    }
                    .red {
                       background: #FF7470;
                    }
                    .blue {
                        background: #81A8EA;
                    }
                }
                .main-cont-arrow {
                    display: flex;
                    height: 100%;
                    width: 48px;
                    justify-content: center;
                    .main-arrow-list {
                        display: flex;
                        height: 13px;
                        align-items: center;
                        margin: 48px 10px 0 10px;
                        .main-arrow-line {
                           width: 20px;
                           height: 1px;
                           background: #D8D8D8;
                        }
                        .main-arrow-delta {
                            width: 0px;
                            height: 0px;
                            border-width: 5px;
                            border-style: solid;
                            border-color: transparent transparent transparent #D8D8D8;
                        }
                    }
                }
            }
        }
        .funnel-content {
            width: 100%;
            margin-left: 0;
        }
    }
    /* 商城搜索 */
    .search {
        display: flex;
        flex-direction: column;
        align-items: center;
        .search-data {
            width: 100%;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            padding: 12px 15px 30px 15px;
            margin-bottom: 10px;
            .main-content {
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 9px;
                &-title {
                   color: #000000;
                   font-size: 14px;
                }
            }
            .main-seat {
                width: 100%;
                height: 1px;
                background: #F4F4F4;
                margin-bottom: 35px;
            }
        }
    }
    /* banner */
    .banner {
        width: 100%;
        display: flex;
        flex-direction: column;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
        .banner-top {
            display: flex;
            padding: 12px 15px 30px 15px;
            background: #ffffff;
            flex-direction: column;
            margin-bottom: 10px;
        }
        .banner-bottom {
            display: flex;
            padding: 12px 15px 30px 15px;
            background: #ffffff;
            flex-direction: column;
            min-height: 273px;
            .main-seat {
                margin-bottom: 15px;
            }
        }
        .banner-bottom-jing {
            border: none;
        }
    }
    /* 0元购 */
    .zero {
        width: 100%;
        display: flex;
        flex-direction: column;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
        .banner-top {
            display: flex;
            padding: 12px 15px 30px 15px;
            background: #ffffff;
            flex-direction: column;
            margin-bottom: 10px;
        }
        .banner-bottom {
            display: flex;
            padding: 12px 15px 30px 15px;
            background: #ffffff;
            flex-direction: column;
            margin-bottom: 10px;
            min-height: 273px;
            .main-seat {
                margin-bottom: 15px;
            }
        }
    }
    //排名前100商品
    .range-shop {
        width: 100%;
        min-height: 300px;
        background: #ffffff;
        display: flex;
        box-sizing: border-box;
        padding: 30px;
        .range-menu {
            display: flex;
            flex-direction: column;
            width: 120px;
            border: 1px solid #dcdfe6;
            border-bottom: none;
            border-right: none;
            .range-menu-index, .range-active {
                width: 120px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                color: #606266;
                cursor: pointer;
                border-bottom: 1px solid #dcdfe6;
                box-sizing: border-box;
                position: relative;
                .range-btn{
                    border:none;
                    background:transparent;
                    position: absolute;
                    top: -1px;
                    right: -2px;
                    z-index: 999;
                }
            }
            .range-active {
                color: #ffffff;
                background: #409eff;
            }
        }
        .range-data {
            width: 100%;
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 13px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: #20A0FF;
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 数据展示 */
    .zd-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        .zd-list {
            width: calc(100% / 5);
            display: flex;
            flex-direction: column;
            align-items: center;
            .zd-head {
                height: 20px;
                display: flex;
                align-items: center;
                .zd-head-title {
                    font-size: 14px;
                    color: #3F454B;
                }
                .el-button {
                    width:10px;
                    border: none !important;
                    margin: -3px 0 0 -15px !important;
                    background: transparent !important;
                }
                .el-button:hover {
                    background: transparent !important;
                }
            }
            .zd-content {
                height: 38px;
                line-height: 38px;
                color: #1D2023;
                font-size: 22px;
                margin-top: 10px;
            }
        }
    }
    .zd-data-banner .zd-list{
        width: calc(100% / 2);
    }
    .zd-data-zero{
        .zd-list{
            width: calc(100% / 7);
        }
        .zd-list:nth-child(n+8) {
            margin-top: 57px;
        }
    }
    .zd-data-ms .zd-list {
        width: calc(100% / 3);
    }
    .zd-data-home {
        .zd-list {
            width: calc(100% / 5);
        }
        .zd-list:nth-child(n+6) {
            margin-top: 57px;
        }
    }
    .el-shop-tiele {
        color:#409eff;
        cursor: pointer;
    }

    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .shopAnAlysis {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border: none;
        }
        .el-table__header-wrapper {
            border: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-color{
            color: rgba(0, 0, 0);
            font-weight: bold;
        }
    }
</style>
